<template>
  <div>
    <a-modal
      title="考试设置"
      style="top: 20px;"
      :width="800"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="考试名称:">
              <a-input placeholder="请输入考试名称" v-decorator="['title', {rules: [{required: true, message: '请输入考试标题'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="试卷状态:">
              <a-input placeholder="试卷状态" v-decorator="['state', {rules: [{required: true, message: '请输入试卷状态'}]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="及格分数:">
              <a-input placeholder="及格分"
                       v-decorator="['qualifyScore', {rules: [{required: true, message: '请输入及格分数'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!--            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="试卷状态">-->
            <!--              <a-input placeholder="考试时长" v-decorator="['totalTime', {rules: [{required: true, message: '请输入试卷状态'}]}]"/>-->
            <!--            </a-form-item>-->
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="考试时长">
              <a-time-picker
                format="HH:mm"
                v-decorator="['totalTime', {rules: [{type: 'object', required: true, message: '请输入考试时长'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-form-item label="选择考试时间:" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-range-picker
                v-decorator="['rangeTimePicker']"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-card title="考试班级">
          <a-tree
            v-model="checkedKeys"
            checkable
            :auto-expand-parent="autoExpandParent"
            :selected-keys="selectedKeys"
            :tree-data="treeData"
            @expand="onExpand"
            @check="oncheck"
          />
        </a-card>
        <a-card title="防作弊选项">
          <p> 答题时摄像头拍照监考:
            <a-switch @change="onChange" />
          </p>
          <p v-show="photo">
            <a-form-item>
              学员开始答题后，每
              <a-input v-decorator="['photoMinutes']" style="width: 100px" />
              分钟抓拍一张学员答题照片
            </a-form-item>
          </p>
          <p>切屏后强制交卷 :
            <a-switch @change="onCutScreenChange" />
          </p>
          <p v-show="cutScreen">
            <a-form-item>
              学员切换页面超过
              <a-input v-decorator="['cutScreen']" style="width: 100px" />
              次后将被强制交卷
            </a-form-item>
          </p>
        </a-card>

      </a-form>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment'
import { saveElPaper } from '@/api/elExam'
import { getTreeForGreadDept } from '@/api/classes'
export default {
  name: 'RuleModal',
  data() {
    return {
      deptTree: [],
      treeData: [],
      checkedKeys: [],
      autoExpandParent: false,
      selectedKeys: [],
      expandedKeys: [],
      deList: [],
      dataList: [],
      paperId: '',
      totalScore: 0,
      visible: false,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      config: {
        rules: [{ type: 'object', required: true, message: '请输入考试时长!' }]
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      photo: false,
      cutScreen: false,
      mdl: {},
      form: this.$form.createForm(this)
    }
  },
  created () {
    getTreeForGreadDept().then(res => {
      if (res.code === 0) {
        this.buildtree1(res.data, this.treeData, '0')
        this.expandedKeys = res.data.map(m => m.parentId)
        this.dataList = res.data.map(m => {
          return { key: m.id, title: m.name }
        })
      }
    })
  },
  methods: {
    moment,
    oncheck(val){
      this.deList = val
      console.log(this.deList)
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCutScreenChange(val) {
      this.cutScreen = val
    },
    onChange(val) {
      this.photo = val
    },
    showModal(value) {
      this.visible = true
      this.paperId = value.id
      this.totalScore = value.totalScore
      console.log(value.id)
      console.log(value.totalScore)
    },
    handleOk(e) {
      this.form.validateFields((err, value) => {

        console.log(this.deList)
        console.log(value)
        value.paperId = this.paperId
        value.totalScore = this.totalScore
        value.depaId = this.deList
        value.totalTime = moment(value.totalTime._d).format('HH:mm')
        value.startTime = moment(value.rangeTimePicker[0]._d).format('YYYY-MM-DD HH:mm:ss')
        value.endTime = moment(value.rangeTimePicker[1]._d).format('YYYY-MM-DD HH:mm:ss')

        if (!err) {
          console.log('Received values of form: ', value)
          this.confirmLoading = true
          saveElPaper(value).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功')
              this.$emit('ok')
              this.visible = false
            } else {
              this.$message.error(res.msg)
            }
            console.log(res)
          }).catch(() => {
            this.$message.error('系统错误，请稍后再试')
          }).finally(() => {
            this.confirmLoading = false
          })
        }

      })
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
    buildtree1 (list, arr, parentId) {
      list.forEach(item => {
        if (item.parentId === parentId) {
          var child = {
            key: item.id,
            value: item.id, // value是给modal的select用的，2者属性不一样
            title: item.name,
            scopedSlots: { title: 'title' },
            children: []
          }
          this.buildtree1(list, child.children, item.id)
          if (child.children.length === 0) {
            delete child.children
          }
          arr.push(child)
        }
      })
    },
  }
}
</script>

<style scoped>

</style>